<!--
 * 教师/管理员主页组件
 * 
 * 功能说明：
 * 1. 教师和管理员功能的主页面布局
 * 2. 包含顶部导航栏、左侧菜单、面包屑导航和主内容区域
 * 3. 作为教师/管理员功能的路由容器
 * 4. 提供统一的页面布局和导航结构
 * 
 * 布局结构：
 * - 顶部导航栏：显示用户信息和系统标题
 * - 左侧菜单：功能模块导航（考试管理、题库管理、成绩查询、学生管理）
 * - 面包屑导航：显示当前页面路径
 * - 主内容区域：显示具体的功能页面
 * 
 * 子组件：
 * - header：顶部导航栏组件
 * - mainLeft：左侧菜单组件
 * - navigator：面包屑导航组件
 * 

-->
<template>
  <div id="index">
    <!-- 顶部导航栏组件 -->
    <header1 class="topbar"></header1>
    
    <!-- 主要内容区域 -->
    <section class="container">
      <!-- 左侧菜单区域 -->
      <div class="left_side">
        <mainLeft></mainLeft>
      </div>
      
      <!-- 右侧主内容区域 -->
      <div class="main_wrapper">
        <!-- 面包屑导航组件 -->
        <navigator class="nav"></navigator>
        
        <!-- 路由视图区域 - 显示具体的功能页面 -->
        <router-view></router-view>
      </div>
    </section>
  </div>
</template>

<script>
// 导入子组件
import header from '@/components/common/header'      // 顶部导航栏组件
import mainLeft from '@/components/common/mainLeft'  // 左侧菜单组件
import navigator from '@/components/common/navigator' // 面包屑导航组件

export default {
  // 注册子组件
  components:{
    header1: header,     // 顶部导航栏
    mainLeft: mainLeft,  // 左侧菜单
    navigator: navigator // 面包屑导航
  },
  
  data() {
    return {
      username: '许如梦' // 用户名（当前为硬编码，实际应该从cookie或API获取）
    }
  },
  
  methods: {
    // 当前没有具体的方法实现
    // 可以在这里添加页面级别的功能方法
  }
}
</script>

<style lang="less" scoped>
/* 面包屑导航样式 */
#index .nav {
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  margin-bottom: 30px; /* 底部间距 */
}

/* 主容器样式 */
.container {
  display: flex; /* 水平布局 */
  background-color: #fff; /* 白色背景 */
}

/* 主内容区域样式 */
.main_wrapper {
  overflow: hidden; /* 隐藏溢出内容 */
  flex: 1; /* 占据剩余空间 */
  background-color: #fff; /* 白色背景 */
}
</style>

